<template>
    <div class="mainBox">
        <div class="search">
            <el-cascader
                v-if="isShow"
                v-model="caValue"
                :options="cascaders"
            ></el-cascader>
            <h2 v-else>{{ title }}</h2>
        </div>
        <div class="center">
            <div class="tests">
                <h3>测试数据</h3>
                <h6>变压器</h6>
                <div class="item">
                    <span>输入电压:</span>
                    <el-input
                        v-model="form['变压器']['输入电压'].testData"
                        placeholder="定位"
                    ></el-input>
                </div>
                <div class="item">
                    <span>输出电压:</span>
                    <el-input
                        v-model="form['变压器']['输出电压'].testData"
                        placeholder="定位"
                    ></el-input>
                </div>
                <div class="item">
                    <span>输入电流:</span>
                    <el-input
                        v-model="form['变压器']['输入电流'].testData"
                        placeholder="定位"
                    ></el-input>
                </div>
                <h6>LED发光盘</h6>
                <div class="item">
                    <span>输入电压:</span>
                    <el-input
                        v-model="form['LED发光盘']['输入电压'].testData"
                        placeholder="定位"
                    ></el-input>
                </div>
                <div class="item">
                    <span>输出电压1:</span>
                    <el-input
                        v-model="form['LED发光盘']['输出电压1'].testData"
                        placeholder="定位"
                    ></el-input>
                </div>
                <div class="item">
                    <span>输出电压2:</span>
                    <el-input
                        v-model="form['LED发光盘']['输出电压2'].testData"
                        placeholder="定位"
                    ></el-input>
                </div>
            </div>
            <div class="resize">
                <h3>调整数据</h3>
                <h6>变压器</h6>
                <div class="item">
                    <span>输入电压:</span>
                    <el-input
                        v-model="form['变压器']['输入电压'].adjustData"
                        placeholder="定位"
                    ></el-input>
                </div>
                <div class="item">
                    <span>输出电压:</span>
                    <el-input
                        v-model="form['变压器']['输出电压'].adjustData"
                        placeholder="定位"
                    ></el-input>
                </div>
                <div class="item">
                    <span>输入电流:</span>
                    <el-input
                        v-model="form['变压器']['输入电流'].adjustData"
                        placeholder="定位"
                    ></el-input>
                </div>
                <h6>LED发光盘</h6>
                <div class="item">
                    <span>输入电压:</span>
                    <el-input
                        v-model="form['LED发光盘']['输入电压'].adjustData"
                        placeholder="定位"
                    ></el-input>
                </div>
                <div class="item">
                    <span>输出电压1:</span>
                    <el-input
                        v-model="form['LED发光盘']['输出电压1'].adjustData"
                        placeholder="定位"
                    ></el-input>
                </div>
                <div class="item">
                    <span>输出电压2:</span>
                    <el-input
                        v-model="form['LED发光盘']['输出电压2'].adjustData"
                        placeholder="定位"
                    ></el-input>
                </div>
            </div>
        </div>
        <div class="remark">
            <h3>备注</h3>
            <div class="item">
                <span>备注:</span>
                <el-input v-model="machineRemark" placeholder=""></el-input>
            </div>
            <div class="item cc">
                <span>导通状态:</span>
                <div class="cc">
                    <el-radio v-model="onState" :label="true">正常</el-radio>
                    <el-radio v-model="onState" :label="false">待整改</el-radio>
                </div>
            </div>
            <div class="item cc">
                <span>发光状态:</span>
                <div class="cc">
                    <el-radio v-model="lightState" :label="true">正常</el-radio>
                    <el-radio v-model="lightState" :label="false"
                        >待整改</el-radio
                    >
                </div>
            </div>
            <div class="item cc">
                <span>状态:</span>
                <div class="cc">
                    <el-radio v-model="radio" :label="false">正常</el-radio>
                    <el-radio v-model="radio" :label="true">待整改</el-radio>
                </div>
            </div>
            <div class="item" v-if="radio">
                <span></span>
                <el-input
                    v-model="problemRemark"
                    placeholder="输入备注"
                ></el-input>
            </div>
        </div>
        <div class="btn">
            <el-button type="primary" @click="addData">添加</el-button>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            isShow: true,
            caValue: [],
            cascaders: [],
            title: "",
            machineRemark: "",
            radio: false,
            onState: true,
            lightState: true,
            problemRemark: "",
            form: {
                变压器: {
                    输入电压: { testData: null, adjustData: null },
                    输出电压: { testData: null, adjustData: null },
                    输入电流: { testData: null, adjustData: null },
                },
                LED发光盘: {
                    输入电压: { testData: null, adjustData: null },
                    输出电压1: { testData: null, adjustData: null },
                    输出电压2: { testData: null, adjustData: null },
                },
            },
            to: "",
            region: "",
        };
    },
    created() {
        this.$http
            .get("services/app/XinHaoJiService/GetXinHaoJiSelect")
            .then((res) => {
                this.cascaders = res.data.result;
            });
        if (this.$route.query.id) {
            this.isShow = false;
            this.$http
                .get(
                    `services/app/XinHaoJiService/GetGroupXinHaoJiData?recordId=${this.$route.query.id}`
                )
                .then((res) => {
                    if (res.data.result) {
                        this.title =
                            res.data.result.stationArea +
                            "/" +
                            res.data.result.machineCode;
                        res.data.result.machineDatas.forEach((item) => {
                            this.form[item.type][item.dataType].testData =
                                item.testData;
                            this.form[item.type][item.dataType].adjustData =
                                item.adjustData;
                        });
                        this.machineRemark = res.data.result.machineRemark
                            .content
                            ? res.data.result.machineRemark.content
                            : "";
                        this.onState = res.data.result.machineRemark.onState
                            ? res.data.result.machineRemark.onState
                            : false;
                        this.lightState = res.data.result.machineRemark
                            .lightStatev
                            ? res.data.result.machineRemark.lightStatev
                            : false;
                        this.problemRemark = res.data.result.problemRemark;
                        this.to = res.data.result.stationArea;
                        this.region = res.data.result.machineCode;
                        if (this.problemRemark.length > 0) {
                            this.radio = true;
                        }
                    }
                });
        }
    },
    mounted() {},
    methods: {
        addData() {
            if (this.isShow && !this.caValue[1]) {
                this.$message.error("请选择信号机！");
                return;
            }
            let forms = {};
            forms["machineDatas"] = [];
            for (let i of Object.keys(this.form)) {
                for (let j of Object.keys(this.form[i])) {
                    if (
                        this.form[i][j] &&
                        (this.form[i][j].testData !== null ||
                            this.form[i][j].adjustData !== null) &&
                        (this.form[i][j].testData > 0 ||
                            this.form[i][j].adjustData > 0)
                    ) {
                        if (
                            !(
                                this.form[i][j].testData &&
                                this.form[i][j].adjustData &&
                                this.form[i][j].testData - 0 > 0 &&
                                this.form[i][j].adjustData - 0 > 0
                            )
                        ) {
                            this.$message.error("请填写完整数据！");
                            return;
                        }
                        let item = {
                            dataType: j,
                            testData: this.form[i][j].testData,
                            adjustData: this.form[i][j].adjustData,
                            type: i,
                        };
                        if (this.$route.query.id) {
                            item["machineId"] = this.$route.query.id;
                        }
                        forms["machineDatas"].push(item);
                    }
                }
            }
            forms["machineCode"] = this.caValue[1]
                ? this.caValue[1]
                : this.region;
            forms["problemRemark"] = this.problemRemark;
            forms["status"] = 0;
            if (this.$route.query.id) {
                forms["recordId"] = this.$route.query.id;
                forms.machineRemark = {
                    id: this.$route.query.id,
                    content: this.machineRemark,
                    onState: this.onState,
                    lightState: this.lightState,
                };
                this.$http
                    .put(
                        "services/app/XinHaoJiService/UpdateGroupXinHaoJiData",
                        forms
                    )
                    .then((res) => {
                        this.$router.push({
                            name: "homePage",
                            query: {
                                one: this.caValue[0]
                                    ? this.caValue[0]
                                    : this.to,
                                two: this.caValue[1]
                                    ? this.caValue[1]
                                    : this.region,
                            },
                        });
                    });
                return;
            }

            forms["machineRemark"] = this.machineRemark;
            forms["onState"] = this.onState;
            forms["lightState"] = this.lightState;

            this.$http
                .post("services/app/XinHaoJiService/AddAllXinHaoJiData", forms)
                .then(() => {
                    this.$router.push({
                        name: "homePage",
                        query: {
                            one: this.caValue[0] ? this.caValue[0] : this.to,
                            two: this.caValue[1]
                                ? this.caValue[1]
                                : this.region,
                        },
                    });
                });
        },
    },
};
</script>
<style lang="less" scoped>
/deep/ .el-input {
    input {
        background-color: var(--input-bgc);
    }
}

.mainBox {
    height: calc(100vh - 110px);
}
/deep/ input {
    color: #fff;
}
.el-cascader {
    /deep/ input[placeholder] {
        &::placeholder {
            color: #fff;
        }
    }
}

/deep/ input[placeholder] {
    &::placeholder {
        color: var(--color);
    }
}
.mainBox::-webkit-scrollbar {
    width: 0px;
}
.search {
    margin-bottom: 10px;
}
.center {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
    height: 510px;
    .tests {
        // background-color: var(--color);
        height: 100%;
        width: 49.5%;
        display: flex;
        align-items: center;
        flex-direction: column;
        h6 {
            font-size: 20px;
            font-weight: 400;
            margin: 10px;
        }
        .item {
            display: flex;
            justify-content: center;
            margin-bottom: 20px;
            span {
                width: 140px;
                height: 40px;
                text-align: end;
                margin-right: 20px;
                line-height: 40px;
            }
            .el-input {
                width: 200px;
                margin-right: 20px;
            }
        }
    }
    .resize {
        // background-color: var(--color);
        height: 100%;
        width: 49.5%;
        display: flex;
        align-items: center;
        flex-direction: column;
        h6 {
            font-size: 20px;
            font-weight: 400;
            margin: 10px;
        }
        .item {
            display: flex;
            justify-content: center;
            margin-bottom: 20px;
            span {
                width: 140px;
                height: 40px;
                text-align: end;
                margin-right: 20px;
                line-height: 40px;
            }
            .el-input {
                width: 200px;
                margin-right: 20px;
            }
        }
    }
}
.remark {
    h3 {
        width: 100%;
        text-align: center;
    }
    flex-direction: column;
    align-items: flex-start;
    display: flex;
    // background-color: var(--color);
    margin-bottom: 10px;
    height: 350px;
    .item {
        display: flex;
        margin-bottom: 20px;
        span {
            width: 200px;
            height: 40px;
            text-align: end;
            margin-right: 20px;
            line-height: 40px;
        }
        .el-input {
            width: 200px;
            margin-right: 20px;
        }
        .cc {
            line-height: 40px;
        }
    }
}
.btn {
    display: flex;
    justify-content: center;
    // background-color: #fff;
    padding: 10px;
}
</style>
